<template>
  <toggle-content>
    <el-select v-model="selectSearchType" size="mini" placeholder="请选择">
      <el-option label="工号" value="1"> </el-option>
      <el-option label="姓名" value="2"> </el-option>
    </el-select>
    <el-input
      size="mini"
      v-model="search"
      @change.native="searchTeacher"
      style="margin-top: 5px"
      :placeholder="
        selectSearchType
          ? `请根据${selectSearchType === 1 ? '工号' : '姓名'}搜索`
          : '请选择搜索类型'
      "
    >
    </el-input>
    <br /><br />
    <el-button @click="exportExcel"> 导出 Excel </el-button>
    <el-table height="700" ref="table" :data="tableData" style="width: 100%">
      <el-table-column label="ID" prop="_id"> </el-table-column>
      <el-table-column label="工号" prop="teacherNo"> </el-table-column>
      <el-table-column label="姓名" prop="teacherName"> </el-table-column>
      <el-table-column label="生日" prop="teacherBirthday"> </el-table-column>
      <el-table-column label="性别" prop="teacherSex"> </el-table-column>
      <!-- <el-table-column label="学科" prop="subject"> </el-table-column> -->
      <el-table-column label="电话" prop="teacherPhone"> </el-table-column>
      <el-table-column label="地址" prop="teacherNowAddress"> </el-table-column>
      <el-table-column align="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            v-if="userInfo.role === 'dean' || userInfo.role === 'admin'"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row style="margin-top: 10px">
      <el-col>
        <el-pagination
          @current-change="pageCurrentChange"
          @prev-click="pagePrevClick"
          @next-click="pageNextClick"
          :page-size="pageSize"
          :total="count"
          :small="small"
          background
          layout="prev, pager, next"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </toggle-content>
</template>

<script>
import { nanoid } from "nanoid";
import { isMobile } from "@/util/util";

import {
  useGetTeacherList,
  useGetTeacherCount,
  useDeleteTeacher,
} from "@/hooks/teacher";

import { mapState } from "vuex";

export default {
  name: "Teacher",
  inject: ["app"],
  data() {
    return {
      count: 0,
      small: false,
      tableData: [],
      search: "",
      selectSearchType: "",
      pageSize: 12,
    };
  },
  mounted() {
    this.small = isMobile();
    (async () => {
      this.count = (await useGetTeacherCount()).data?.count;
      console.log(this.count);
      this.tableData = (await useGetTeacherList()).data?.teacher.map((c) => {
        c.teacherBirthday = new Date(c.teacherBirthday).toLocaleDateString();
        return c;
      });
    })();
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  watch: {
    async selectSearchType(selectType) {
      if (!this.search) {
        return this.$message.error("请选择搜索内容");
      }
      this.commonGetTableData();
    },
    $route: {
      handler(route) {
        if (route.name === "teacher") {
          (async () => {
            this.count = (await useGetTeacherCount()).data?.count;
            console.log(this.count);
            this.tableData = (await useGetTeacherList()).data?.teacher.map(
              (c) => {
                c.teacherBirthday = new Date(
                  c.teacherBirthday
                ).toLocaleDateString();
                return c;
              }
            );
          })();
        }
      },
      deep: true,
    },
  },
  methods: {
    async searchTeacher() {
      if (!this.selectSearchType) {
        return this.$message.error("请选择类型");
      }
      this.commonGetTableData();
    },
    handleEdit(index, row) {
      this.$router.push("/teacher/edit");
    },
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该教师, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { _id } = row;
          const teacher = await useDeleteTeacher(_id);
          // 此处可以做更详细的判断 我就省略了......
          this.$message.success("删除成功!");
          this.commonGetTableData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async commonGetTableData(currentPage) {
      const resInfo = await useGetTeacherList(
        this.selectSearchType ? this.selectSearchType : null,
        this.search ? this.search : null,
        currentPage ? currentPage : null
      );
      if (resInfo.code === 201 && resInfo.message === "success") {
        this.tableData = resInfo.data.teacher.map((c) => {
          c.teacherBirthday = new Date(c.teacherBirthday).toLocaleDateString();
          return c;
        });
      } else {
        this.tableData = [];
        this.$message.error(resInfo.message);
      }
    },
    async pageCurrentChange(currentPage) {
      this.commonGetTableData(currentPage);
      this.app.$refs["main"].$el.scrollTo(0, 0);
    },
    async pagePrevClick(currentPage) {
      this.commonGetTableData(currentPage);
    },
    async pageNextClick(currentPage) {
      this.commonGetTableData(currentPage);
    },
  },
};
</script>

<style lang="scss" scoped></style>
